import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../utils/screenAdapter.dart';
import '../controllers/goods_details_controller.dart';
import '../../../service/HttpsClient.dart';

class FirstPageView extends GetView<GoodsDetailsController> {
  final Function showBottomAttr;
  const FirstPageView({super.key, required this.showBottomAttr});
  // 选择区域
  Widget _selection({
    required String title,
    String? middle,
    required String serviceType,
  }) {
    return InkWell(
      onTap: () {
        if (serviceType == "attribute") {
          // 调用父组件的方法
          showBottomAttr(actions: "confirmSelection");
        } else if (serviceType == "store") {
          Get.bottomSheet(
            enterBottomSheetDuration: const Duration(milliseconds: 200),
            exitBottomSheetDuration: const Duration(milliseconds: 200),
            Container(
              width: double.infinity,
              height: ScreenAdapter.height(1200),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white,
              ),
              child: ListView(
                children: [
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: const Color.fromARGB(248, 255, 252, 252),
                    ),
                    margin: EdgeInsets.all(ScreenAdapter.width(10)),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "小米之家万达营业点",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(52),
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "方塔路万达2012铺小米之家",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "距离1.04km",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "营业时间 9:00-23:00",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: const Color.fromARGB(248, 255, 252, 252),
                    ),
                    margin: EdgeInsets.all(ScreenAdapter.width(10)),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "小米之家万达营业点",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(52),
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "方塔路万达2012铺小米之家",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "距离1.04km",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "营业时间 9:00-23:00",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: const Color.fromARGB(248, 255, 252, 252),
                    ),
                    margin: EdgeInsets.all(ScreenAdapter.width(10)),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "小米之家万达营业点",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(52),
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "方塔路万达2012铺小米之家",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "距离1.04km",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                            ),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(ScreenAdapter.height(32)),
                          child: Text(
                            "营业时间 9:00-23:00",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(34),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        } else if (serviceType == "service") {
          Get.bottomSheet(
            enterBottomSheetDuration: const Duration(milliseconds: 200),
            exitBottomSheetDuration: const Duration(milliseconds: 200),
            Container(
              width: double.infinity,
              height: ScreenAdapter.height(1200),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white,
              ),
              child: ListView(
                children: [
                  Text('''

    小米科技有限责任公司成立于2010年3月3日，是专注于智能硬件和电子产品研发的全球化移动互联网企业，同时也是一家专注于智能手机、智能电动汽车 [385]  、互联网电视及智能家居生态链建设的创新型科技企业。 [2-3]  小米公司创造了用互联网模式开发手机操作系统、发烧友参与开发改进的模式。

    “为发烧而生”是小米的产品概念。“让每个人都能享受科技的乐趣”是小米公司的愿景。小米公司应用了互联网开发模式开发产品，用极客精神做产品，用互联网模式干掉中间环节，致力让全球每个人，都能享用来自中国的优质科技产品。

    小米已经建成了全球最大消费类IoT物联网平台，连接超过4.78亿台智能设备，进入全球100多个国家和地区。 [4]  [314]  MIUI全球月活跃用户达到5.5亿 [384]  。小米系投资的公司超500家，覆盖智能硬件、生活消费用品、教育、游戏、社交网络、文化娱乐、医疗健康、汽车交通、金融等领域。
    
    '''),
                ],
              ),
            ),
          );
        }
      },
      child: Container(
        height: ScreenAdapter.height(80),
        margin: EdgeInsets.only(top: ScreenAdapter.height(50)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Text(title, style: TextStyle(fontWeight: FontWeight.bold)),
                serviceType == "service"
                    ? Container(
                        width: ScreenAdapter.width(550),
                        margin: EdgeInsets.only(left: ScreenAdapter.width(20)),
                        child: Image.asset(
                          "assets/images/service.png",
                          fit: BoxFit.cover,
                        ),
                      )
                    : Padding(
                        padding: EdgeInsets.only(left: ScreenAdapter.width(20)),
                        child: Text(middle!),
                      ),
              ],
            ),
            Icon(
              Icons.arrow_forward_ios_rounded,
              color: Colors.black38,
              size: ScreenAdapter.fontSize(38),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Obx(
      () =>
          controller.goodsDetail.value.cid !=
              null // 处理数据还没回来先加载loading
          ? Container(
              color: Colors.white,
              padding: EdgeInsets.fromLTRB(
                ScreenAdapter.width(20),
                0,
                ScreenAdapter.width(10),
                0,
              ),
              key: controller.gk1,
              child: Column(
                children: [
                  AspectRatio(
                    aspectRatio: 1 / 1,
                    child: Image.network(
                      HttpsClient.getImgUrl(controller.goodsDetail.value.pic!),
                      fit: BoxFit.cover,
                    ),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    padding: EdgeInsets.only(top: ScreenAdapter.height(20)),
                    child: Text(
                      controller.goodsDetail.value.title!,
                      style: TextStyle(
                        fontSize: ScreenAdapter.fontSize(46),
                        color: Colors.black87,
                      ),
                    ),
                  ), // 商品标题
                  Container(
                    alignment: Alignment.centerLeft,
                    padding: EdgeInsets.only(top: ScreenAdapter.height(20)),
                    child: Text(
                      controller.goodsDetail.value.subTitle!,
                      style: TextStyle(
                        color: Colors.black87,
                        fontSize: ScreenAdapter.fontSize(34),
                      ),
                    ),
                  ), // 二级标题
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Row(
                        children: [
                          Text(
                            "价格:",
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          Text(
                            "¥${controller.goodsDetail.value.price}",
                            style: TextStyle(
                              color: Colors.red,
                              fontSize: ScreenAdapter.fontSize(66),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Text(
                            "原价:",
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          Text(
                            "¥${controller.goodsDetail.value.oldPrice}",
                            style: TextStyle(
                              color: Colors.black26,
                              decoration: TextDecoration.lineThrough, // 划线
                              decorationColor: Colors.black26, // 划线颜色
                              fontSize: ScreenAdapter.fontSize(46),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ), // 价格
                  Obx(
                    () => _selection(
                      title: "已选",
                      middle: controller.checkedAttrStr.value,
                      serviceType: "attribute",
                    ),
                  ), // 已选商品属性选择
                  _selection(
                    title: "门店",
                    middle: "小米之家万达营业点",
                    serviceType: "store",
                  ), // 门店
                  _selection(title: "服务", serviceType: "service"), // 服务
                ],
              ),
            )
          : SizedBox(
              width: double.infinity,
              height: ScreenAdapter.screenHeight(),
              child: Center(
                child: CircularProgressIndicator(),
              ), // 加载中的圆圈Loading
            ),
    );
  }
}
